<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Xcy-Admin 安装程序</title>
    <link rel="stylesheet" href="__ADMIN__/layui/css/layui.css" />
    <link rel="stylesheet" href="__ADMIN__/pear/css/pear.css" />
    <style>
        .pear-container {
            margin: 10px;
            background-color: whitesmoke;
        }
        
        .logo {
            width: 60px;
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 20px;
        }
        
        .title {
            font-size: 30px;
            font-weight: 550;
            margin-left: 20px;
            color: #5FB878!important;
            display: inline-block;
            height: 60px;
            line-height: 60px;
            margin-top: 10px;
        }
        
        .top {
            text-align: center;
            margin-top: 50px;
        }
        
        .step-item-main {
            padding-left: 38px;
        }
    </style>
</head>

<body class="pear-container" background="__ADMIN__/images/background.svg">
    <div class="top">
        <img class="logo" src="__ADMIN__/images/logo.png" />
        <div class="title">Xcy-Admin </div>
    </div>
    <div class="layui-card-body" style="padding-top: 40px;">
        <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
            <div carousel-item>
                <div>
                    <form class="layui-form" action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">数据库地址</label>
                            <div class="layui-input-block">
                                <input type="text" name="host" value="127.0.0.1" class="layui-input" lay-verify="required" />

                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">数据库端口</label>
                            <div class="layui-input-block">
                                <input type="text" name="port" value="3306" class="layui-input" lay-verify="required" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">数据库账号</label>
                            <div class="layui-input-block">
                                <input type="text" name="user" value="" class="layui-input" lay-verify="required" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">数据库密码</label>
                            <div class="layui-input-block">
                                <input type="text" name="pass" value="" class="layui-input" lay-verify="required" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">数据库名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" value="" class="layui-input" lay-verify="required" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="reset" class="pear-btn pear-btn-success">
                                        &emsp;重&emsp;置&emsp;
                                    </button>
                                <button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep">
                                        &emsp;下一步&emsp;
                                    </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div>
                    <form class="layui-form" action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">管理员账号</label>
                            <div class="layui-input-block">
                                <input type="text" name="username" value="admin" class="layui-input" lay-verify="required" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">管理员昵称</label>
                            <div class="layui-input-block">
                                <input type="text" name="nickname" value="超级管理员" class="layui-input" lay-verify="required" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">管理员密码</label>
                            <div class="layui-input-block">
                                <input type="text" name="password" value="123456" class="layui-input" lay-verify="required" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="button" class="pear-btn pear-btn-success pre">&emsp;上一步&emsp;</button>
                                <button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep2">
                                        &emsp;下一步&emsp;
                                    </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div>
                    <div style="text-align: center;margin-top: 90px;">
                        <div style="font-size: 14px;color: red;margin-top: 20px;">
                            <p>注意:恭喜您安装成功</p>
                        </div>
                    </div>
                    <div style="text-align: center;margin-top: 50px;">
                        <button class="pear-btn pear-btn-success pre">&emsp;上一步&emsp;</button>
                        <button class="pear-btn pear-btn-success go">&emsp;提交&emsp;</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="__ADMIN__/layui/layui.js"></script>
    <script src="__ADMIN__/pear/pear.js"></script>
    <script>
        layui.use(['form', 'layer', 'step'], function() {
            var $ = layui.$,
                form = layui.form,
                step = layui.step;

            step.render({
                elem: '#stepForm',
                filter: 'stepForm',
                width: '100%', //设置容器宽度
                stepWidth: '750px',
                height: '500px',
                stepItems: [{
                    title: '数据库'
                }, {
                    title: '管理员'
                }, {
                    title: '提交'
                }]
            });
            form.on('submit(formStep)', function(data) {
                sql = data.field;
                step.next('#stepForm');
                return false;
            });
            form.on('submit(formStep2)', function(data) {
                admin = data.field;
                step.next('#stepForm');
                return false;
            });

            $('.pre').click(function() {
                step.pre('#stepForm');
                return false;
            });

            $('.next').click(function() {
                step.next('#stepForm');
                return false;
            });

            $('.go').click(function() {
                layer.load();
                $.ajax({
                    type: "POST",
                    data: Object.assign(sql, admin),
                    success: function(res) {
                        layer.closeAll('loading');
                        //验证通过
                        if (res.code == 200) {
                            layer.msg(res.msg, {
                                icon: 1,
                                time: 1500
                            });
                            location.reload();
                        } else {
                            layer.msg(res.msg, {
                                icon: 2,
                                time: 1500
                            })
                        }
                    }
                });
                return false;
            });
        })
    </script>
</body>

</html>